<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="keywords" content="关键字,keywords" />
		<meta name="description" content="描述">
		<title>润泉</title>
		<link rel="stylesheet" href="__CSS__/bootstrap.css" />
		<link rel="stylesheet" href="__CSS__/style.css" />
		<link rel="stylesheet" href="__CSS__/layui.css" />
		<link rel="stylesheet" href="__CSS__/wwstyle.css" />
		<script type="text/javascript" src="__JS__/jquery-2.1.0.js"></script>
		<script type="text/javascript" src="__JS__/bootstrap.min.js"></script>
		<!--//laypage翻页需要 start-->
		<script type="text/javascript" src="__JS__/layer/layer.js"></script>
		<script type="text/javascript" src="__JS__/laypage/laypage.js"></script>
		<script type="text/javascript" src="__JS__/laytpl/laytpl.js"></script>
		<script type="text/javascript" src="__JS__/info.js"></script>
		<link rel="stylesheet" href="__CSS__/laypage.css" />
		<!--//laypage翻页需要 end-->
	</head>
	<style>
		.form-control {
			height: 33px;
		}
	</style>
	<style>
		/*分页样式*/
		
		.pagination {
			text-align: center;
			margin-top: 20px;
			margin-bottom: 20px;
		}
		
		.pagination li {
			margin: 0px 10px;
			border: 1px solid #e6e6e6;
			padding: 3px 8px;
			display: inline-block;
		}
		
		.pagination .active {
			background-color: #46A3FF;
			color: #fff;
		}
		
		.pagination .disabled {
			color: #aaa;
		}
	</style>

	<body id="content">
		<div class="container  privilegeUserList pb40">
			<h2 class="list-title">角色列表</h2>
			<div class="addUser">
				<div class="row">
					<div class="col-lg-2 col-md-2 	col-sm-3">
						<a href="{:url('role/addRole')}" class="btn btn-default addUser-btn">添加角色</a>
					</div>
					<div class="col-lg-4  col-md-4 	col-sm-6">
						<div class="input-group">
							<input type="text" id="key" value="{present name='$where'}{$where.title}{/present}" class="form-control borBox" placeholder="输入需要查询的角色名">
							<span class="input-group-btn">
				        <button class="btn btn-primary borBox"  id="search" type="button">搜索</button>
				      </span>
						</div>
						<!-- /input-group -->
					</div>
					<!-- /.col-lg-6 -->
				</div>
				<!-- /.row -->
			</div>

			<form id="form1" method="Post">
				<table class="table table-striped announcement_table">
					<tr>
						<th>ID</th>
						<th>角色名称</th>
						<th>状态</th>
						<th>添加时间</th>
						<th>更新时间</th>
						<th>操作</th>
					</tr>
					<script id="list-template" type="text/html">
						{{# for(var i=0;i
						<d.length;i++){ }} <tr>
							<td>
								<p class="announcement_title">{{d[i].id}}</p>
							</td>
							<td>{{d[i].title}}</td>
							<td>
								{{# if(d[i].status==1){ }}
								<div id="zt8" onclick="role_state(this)"><span class="label label-info">开启</span></div>
								{{# }else{ }}
								<div id="zt8" onclick="role_state(this)"><span class="label label-danger">禁用</span></div>
								{{# } }}
							</td>
							<td>{{d[i].add_time}}</td>
							<td>{{d[i].update_time}}</td>
							<td>
								<a href="javascript:;" onclick="giveQx()" class="btn btn-info btn-xs"> <i class="fa fa-paste"></i> 权限分配</a>&nbsp;&nbsp;
								<a href="{:url('role/editRole')}?id={{d[i].id}}" class="btn btn-primary btn-xs"> <i class="fa fa-paste"></i> 编辑</a>&nbsp;&nbsp;
								<a href="javascript:;" onclick="roleDel(this)" class="btn btn-danger btn-xs"> <i class="fa fa-trash-o"></i> 删除</a>
							</td>
							</tr>
							{{# } }}
					</script>
					<tbody id="list-content"></tbody>
				</table>
			</form>
			<div class="clearfix" style="float:right;margin: 0 auto;">
				<span class="fl mr20 mt5">共{$count}条数据，</span><span id="allpage" class="fl  mr20 mt5"></span><span class="fl" id="AjaxPage"></span>
			</div>
			<!-- 加载动画 -->
			<div class="spiner-example">
				<div class="sk-spinner sk-spinner-three-bounce">
					<div class="sk-bounce1"></div>
					<div class="sk-bounce2"></div>
					<div class="sk-bounce3"></div>
				</div>
			</div>

		</div>
		<!-- 角色分配 -->
		<div class="layui-layer layui-layer-page layui-layer-demo layer-anim Role-assignment-tc hide">
			<div class="layui-layer-title" style="cursor: move;">权限分配</div>
			<div id="" class="layui-layer-content" style="height: 558px;">
				<div class="left layui-layer-wrap" style="" id="">
					<input type="hidden" id="nodeid" value="">
					<div class="form-group per_class">
						<h2 class="clearfix mb10"><input class="fl mt2"  type="checkbox" value="" name="oneLevel" onclick="allauthority(this)"><span class="fl">系统管理</span></h2>
						<div class="clearfix pl20 Two_level mb10">
							<h3 class="clearfix fl Two_level_all"><input name="tweLevel" class="fl mt2"  type="checkbox" value="" onclick="twoLevel(this)"><span class="fl">管理员管理：</span></h3>
							<ul class="clearfix fl Three_level">
								<li class="fl clearfix ml10"><input name="threeLevel" class="fl" type="checkbox" value="" onclick="threeLevel(this)"><span class="fl">添加用户</span></li>
								<li class="fl clearfix ml10"><input name="threeLevel" class="fl" type="checkbox" value="" onclick="threeLevel(this)"><span class="fl">编辑用户</span></li>
								<li class="fl clearfix ml10"><input name="threeLevel" class="fl" type="checkbox" value="" onclick="threeLevel(this)"><span class="fl">删除用户</span></li>
								<li class="fl clearfix ml10"><input name="threeLevel" class="fl" type="checkbox" value="" onclick="threeLevel(this)"><span class="fl">用户状态</span></li>
							</ul>
						</div>
						<div class="clearfix pl20 Two_level mb10">
							<h3 class="clearfix fl Two_level_all"><input name="tweLevel" class="fl mt2"  type="checkbox" value="" onclick="twoLevel(this)"><span class="fl">角色管理：</span></h3>
							<ul class="clearfix fl Three_level">
								<li class="fl clearfix ml10"><input name="threeLevel" class="fl" type="checkbox" value="" onclick="threeLevel(this)"><span class="fl">添加角色</span></li>
								<li class="fl clearfix ml10"><input name="threeLevel" class="fl" type="checkbox" value="" onclick="threeLevel(this)"><span class="fl">编辑角色</span></li>
								<li class="fl clearfix ml10"><input name="threeLevel" class="fl" type="checkbox" value="" onclick="threeLevel(this)"><span class="fl">删除角色</span></li>
								<li class="fl clearfix ml10"><input name="threeLevel" class="fl" type="checkbox" value="" onclick="threeLevel(this)"><span class="fl">角色状态</span></li>
								<li class="fl clearfix ml10"><input name="threeLevel" class="fl" type="checkbox" value="" onclick="threeLevel(this)"><span class="fl">权限分配</span></li>
							</ul>
						</div>

					</div>

					<p class="authority-btn"><input type="button" value="确认分配" class="btn btn-primary" id="postform"></p>

				</div>
			</div>
			<span class="layui-layer-setwin" onclick="roleClose()">
				<a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a>
			</span>
			<span class="layui-layer-resize"></span>
		</div>
		<script>
			//laypage分页
			Ajaxpage();

			function Ajaxpage(curr) {
				var key = $('#key').val();
				$.getJSON('{:url("role/index")}', {
					page: curr || 1,
					title: key
				}, function(data) {
					$(".spiner-example").css('display', 'none'); //数据加载完关闭动画
					if(data.data == '') {
						$("#list-content").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
					} else {
						var tpl = document.getElementById('list-template').innerHTML;
						laytpl(tpl).render(data.data, function(html) {
							document.getElementById('list-content').innerHTML = html;
						});
						laypage({
							cont: $('#AjaxPage'), //容器。值支持id名、原生dom对象，jquery对象,
							//                            pages:'{$allpage}',//总页数
							pages: data.page.allpage, //总页数
							skip: true, //是否开启跳页
							skin: '#337ab7', //分页组件颜色
							curr: curr || 1,
							first: '首页', //若不显示，设置false即可
							last: '尾页', //若不显示，设置false即可
							groups: 3, //连续显示分页数
							jump: function(obj, first) {
								if(!first) {
									Ajaxpage(obj.curr)
								}
								$('#allpage').html('，第' + obj.curr + '页，共' + '<i>' + obj.pages + '</i>' + '页');
								inputlength();
							}
						});
					}
				});
			}

			$("#search").click(function() {
				Ajaxpage();
			});
			//删除
			function roleDel(obj) {
				layer.alert('确认删除此条记录吗?', {
					btn: ['确认', '取消'], //按钮

				}, function() {
					layer.open({
						content: '删除成功',
						time: 1
					});
					$(obj).parents("tr").remove()
				});
			}
			//状态开启关闭	
			function role_state(obj) {
				if($(obj).find("span").hasClass("label-info")) {
					layer.msg('禁用', {
						icon: 2,
						time: 2000
					});
					$(obj).find("span").addClass("label-danger")
					$(obj).find("span").removeClass("label-info");
					$(obj).find("span").text("禁用")
				} else {
					layer.msg('开启', {
						icon: 1,
						time: 2000
					});
					$(obj).find("span").removeClass("label-danger")
					$(obj).find("span").addClass("label-info");
					$(obj).find("span").text("开启")
				}
			}
			//开启权限分配
			function giveQx() {
				$(".Role-assignment-tc").show()
			}
			//关闭权限分配
			function roleClose() {
				$(".Role-assignment-tc").hide()
			}

			//点击一级
			function allauthority(obj) {
				if($(obj).is(":checked")) {
					$(".per_class").find("input").prop("checked", true)
				} else {
					$(".per_class").find("input").prop("checked", false)
				}
			}
			//点击二级
			function twoLevel(obj) {
				var tweLevel = $("input[name='tweLevel']").length;
				var threeLevel = $("input[name='threeLevel']").length
				if($(obj).is(":checked")) {
					$(obj).parents(".Two_level").find("input[name='threeLevel']").prop("checked", true)
				} else {
					$(obj).parents(".Two_level").find("input[name='threeLevel']").prop("checked", false)
				}

				var twoAll = 0
				var threeall = 0
				//二级
				for(var i = 0; i < tweLevel; i++) {
					if($("input[name='tweLevel']").eq(i).is(":checked")) {
						twoAll++
					}
				}
				//三级
				for(var j = 0; j < threeLevel; j++) {
					if($("input[name='threeLevel']").eq(j).is(":checked")) {
						threeall++
					}
				}
				if(twoAll == tweLevel && threeall == threeLevel) {
					$("input[name='oneLevel']").prop("checked", true)
				} else {
					$("input[name='oneLevel']").prop("checked", false)
				}

			}
			//点击三级
			function threeLevel(obj) {
				var thisArry = $(obj).parents("ul").find("li").length;
				var threeLevel = $("input[name='threeLevel']").length
				var count = 0;
				var all = 0
				//循环当前二级里面的三级
				for(var i = 0; i < thisArry; i++) {
					if($(obj).parents("ul").find("li").eq(i).find("input").is(":checked")) {
						count++
					}
				}
				//循环所有的三级
				for(var j = 0; j < threeLevel; j++) {
					if($("input[name='threeLevel']").eq(j).is(":checked")) {
						all++
					}
				}
				//选中二级
				if(count != 0) {
					$(obj).parents(".Two_level").find("input[name='tweLevel']").prop("checked", true)
				} else {
					$(obj).parents(".Two_level").find("input[name='tweLevel']").prop("checked", false)
				}
				//选中三级
				if(all == threeLevel) {
					$("input[name='oneLevel']").prop("checked", true)
				} else {
					$("input[name='oneLevel']").prop("checked", false)
				}
			}
		</script>
	</body>

</html>